<template>
	<view style="padding: 30rpx;">
		<view style="padding-left: 40rpx;padding-right: 40rpx;">
			<u-row justify="space-between" customStyle="margin-top: 60rpx">
				<u-col span="4">
					<u--text bold="true" text="充电柜编号"></u--text>
				</u-col>
				<u-col span="4">
					<u--text align="rigth" :text="orderInfo.cabinet.cabinetNo"></u--text>
				</u-col>
			</u-row>
			<u-row justify="space-between" customStyle="margin-top: 40rpx">
				<u-col span="4">
					<u--text bold="true" text="使用时长"></u--text>
				</u-col>
				<u-col span="6">
					<u--text align="rigth" :text="$util.convertSecondsToTime(orderInfo.totalSeconds)"></u--text>
				</u-col>
			</u-row>
			<u-row justify="space-between" customStyle="margin-top: 40rpx">
				<u-col span="4">
					<u--text bold="true" text="实际费用"></u--text>
				</u-col>
				<u-col span="4">
					<u--text align="rigth" :text="`${orderInfo.expectAmount}元`"></u--text>
				</u-col>
			</u-row>

			<u-row justify="space-between" customStyle="margin-top: 40rpx">
				<u-col span="4">
					<u--text bold="true" text="应付费用"></u--text>
				</u-col>
				<u-col span="4">
					<u--text align="rigth" :text="`${orderInfo.actuallyAmount}元`"></u--text>
				</u-col>
			</u-row>
		</view>
		<u-divider :hairline="true"></u-divider>
		<u-row justify="end" customStyle="margin-top: 100rpx">
			<u-col span="5">
				<u--text size="18" align="rigth" bold="true" :text="`${orderInfo.actuallyAmount}元`"></u--text>
			</u-col>
		</u-row>
		<u-row customStyle="margin-top: 200rpx">
			<u-button @click="pay" text="立即支付" customStyle="border-radius:10px;background-color:  #73de87;"></u-button>
		</u-row>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	let that
	export default {
		data() {
			return {
				orderInfo:{},
			}
		},
		onLoad(e) {

		},
		onShow() {
			this.getdetail();
		},
		mounted() {
			that = this
		},
		computed: {
			//引入store全局变量
			...mapState(['loginState'])
		},
		methods: {
			getdetail() {
				this.$http_api.ordersNoFinish({}).then((res) => {
					console.log("orders no pay:", res)
					that.orderInfo = res;
				})
			},
			pay(){
				this.$http_api.payWxTrade({
					id: this.orderInfo.id,
					payType:1,
				}).then((result)=>{
					console.log("payWxTrade result:",result)
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: result.timeStamp,
						nonceStr: result.nonceStr,
						package: result.packageVal,
						signType: result.signType,
						paySign: result.paySign,
						success: function (res) {
							console.log('success:' + JSON.stringify(res));
							uni.$u.toast('支付成功');
							uni.redirectTo({
								url: '/pages/orders/order-info?orderId='+that.orderInfo.id,
							});
						},
						fail: function (err) {
							console.log('fail:' + JSON.stringify(err));
							uni.$u.toast('支付失败');
						}
					});
					
				});
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>